<template>
  <div>
    <el-dialog
        title="签收"
        :visible="true"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="80%"
    >
      <div class="content">
        <el-form label-position="top" label-width="80px" :model="formLabelAlign">
          <el-form-item label="签收日期" class="time">
            <el-button type="primary" round plain @click="handleDate">{{formLabelAlign.date !== '选择签收日期' ? formLabelAlign.date:'选择签收日期'}}</el-button>
          </el-form-item>
          <el-form-item label="签收人">
            <el-input
                placeholder="请输入签收人"
                v-model="formLabelAlign.remark"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="签收单">
            <van-uploader v-model="fileList" multiple accept="image/*"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottomBtn">
        <el-button plain @click="handleCancel">取消操作</el-button>
        <el-button type="primary" plain @click="handleOk">确认签收</el-button>
      </div>
      <div class="select-time">
        <van-datetime-picker
            v-if="isShow"
            v-model="currentDate"
            type="datetime"
            title="选择签收日期"
            @confirm="confirm"
            @cancel="cancel"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime, toFormData } from '../../../../assets/js/common'
import { $landSign } from '../../../../api/transport'

export default {
  props: {
    signObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formLabelAlign: {
        date: '选择签收日期',
        remark: '' // 备注
      },
      currentDate: new Date(),
      isShow: false,
      fileList: [], // 文件上传
      types: ['pdf','jpg','png','doc'],
      flag: false
    }
  },
  methods: {
    // 关闭日期选择器
    cancel() {
      this.isShow = false
    },
    // 日期选择
    confirm() {
      this.isShow = false
      this.formLabelAlign.date = formatTime(this.currentDate)
    },
    handleDate() {
      this.isShow = true
      if (this.formLabelAlign.date === '选择签收日期') {
        this.currentDate = new Date()
      }
      else {
        this.currentDate = new Date(this.formLabelAlign.date)
      }
    },
    handleCancel() {
      this.$emit('handleClose')
    },
    handleOk() {
      const fileList = []
      this.fileList.forEach(item => fileList.push(item.file))
      fileList.forEach(item => {
        const fileEnd = item.name.split('.')
        const text = fileEnd[fileEnd.length - 1]
        if (this.types.indexOf(text) === -1) this.flag = true
      })
      const { date, remark } = this.formLabelAlign
      const { id, transportType } = this.signObj
      const obj = {
        signDate: date + ':00',
        signer: remark,
        enclosure: fileList,
        type: transportType,
        id
      }
      if (this.signObj.transportType.indexOf('零担运输') > -1 && fileList.length === 0) {
        return this.$msg.fail('请上传签收单')
      } else {
        if (fileList.length === 0) delete obj.enclosure
      }
      $landSign
        .signedIn(toFormData(obj))
        .then(res => {
          if (res.status === 200) {
            this.$msg.success(res.message)
            this.$emit('handleClose', 1)
          } else {
            this.$msg.fail(res.message)
          }
        })
        .catch(err => {
          this.$msg.fail(err)
        })
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__body {
  padding: 10px;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-form-item__label {
  padding: 0;
  font-weight: bold;
}
/* 按钮 */
.bottomBtn {
  display: flex;
  justify-content: space-between;
}
/* 修改按钮长度 */
/deep/.time .el-button {
  width: 100%;
  padding-top: 2.333vw !important;
  padding-bottom: 2.333vw !important;
}
/* 时间选择器 */
.select-time {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 1%;
}
.content {
  width: 100%;
  height: 45vh;
  overflow-y: scroll;
}
</style>
